import React, { useEffect, useState, useRef } from 'react';
import {
  View,
  Image,
  Text
} from '@tarojs/components';
import Taro, { useRouter } from '@tarojs/taro';
import {
  queryTaskById,
  postUserPushMsg
} from '@/api';
import {
	getStorageSync,
	setStorageSync,
} from '@utils/util';
import {
  NavBar
} from '@/components';
import './index.scss';

const Makeing = () => {
  const router = useRouter();
  const [titleBarHeight, setTitleBarHeight] = useState(0);
  const [showMask, setShowMask] = useState(false);
  const siv = useRef(null);
  const [percent, setPercent] = useState('0%');
  const total = useRef(10);
  const animation = useRef(null);

  useEffect(() => {
    let Received = getStorageSync('Received');
    if (Received) {
      setShowMask(false);
    } else {
      setShowMask(true);
    }
    Taro.getSystemInfo({
      success: (res) => {
        let height = res.titleBarHeight + res.statusBarHeight
        setTitleBarHeight(height)
      }
    });
    onLoadData();
    // animation.current = setInterval(()=>{
    //   let num = step;
    //   num = num + 1;
    //   setStep(num);
    // }, 1000);
    let timer = null;
    if (total.current > 0) {
      timer = setInterval(() => {
        total.current = total.current - 1;
        if (total.current === 0) {
          clearInterval(timer);
          total.current = 10;
        } else {
          let per = `${(11 - total.current)*10}%`
          setPercent(per)
        }
      }, 1000);
    }
    return () => {
      clearInterval(timer)
      clearInterval(siv.current)
      clearInterval(animation.current)
    };
  }, []);

  const onLoadData = () => {
    siv.current = setInterval(()=>{
      let params = router.params;
      let TaskId = params.TaskId;
      queryTaskById({task_id: TaskId})
        .then(res=>{
          if (res.Status == "Success") {
            clearInterval(siv.current);
            onShowDetail(res)
          }
        });
    }, 2000)

  }

  const doBack = () => {
    Taro.navigateBack({});
  }

  const doReceive = () => {
    setShowMask(false);
    setStorageSync('Received', true);
  }

  const onOpenNotice = () => {
    Taro.requestSubscribeMessage({
      tmplIds: ['MSG1673394161867299902733677512986'],
      success(res) {
        let params = router.params;
        let TaskId = params.TaskId;
        let data = {
          task_id: TaskId,
          push_id: 'MSG1673394161867299902733677512986'
        }
        postUserPushMsg(data)
          .then(res=>{
            Taro.showToast({
              title: "订阅成功",
              icon: "success",
            });
          });
      },
      fail(error) {
        console.log('error', error);
        Taro.showToast({
          title: "订阅失败",
          icon: "fail",
        });
      }
    });
  }

  const onShowDetail = (obj) => {
    Taro.redirectTo({
      url: `/pages/subpages/myportray/detail?id=${obj.ImgId}&img=${obj.Result.data}&tmpl_name=${obj.Tmpl.tmpl_name}&use_num=${obj.Tmpl.use_num}&number=${obj.Tmpl.number}&backdrop_img=${obj.Tmpl.backdrop_img}`
    });
  }

  const onClose = () => {
    let params = router.params;
    let TaskId = params.TaskId;
    Taro.redirectTo({
      url: `/pages/subpages/myportray/index?TaskId=${TaskId}`
    });
  }

  return (
    <View className='makeing_container'>
      {/* <NavBar
        title=""
        showBack={false}
        onClick={()=>{doBack()}}
      /> */}
      <View
        className='makeing_section'
        style={{
          paddingTop: `${titleBarHeight}px`
        }}
      >
        <View className='makeing_section_header'>
          <Image
            src='https://jala-test-images.sndaurl.cn/images/closeIcon.png'
            className='makeing_section_close'
            onClick={()=>{onClose()}}
          />
        </View>
        <View className='makeing_view'>
          <View className='makeing_view_title'>你前面有10个人正在制作写真</View>
          <View className='makeing_view_desc'>
            预计需要
            <Image
              src='https://jala-test-images.sndaurl.cn/images/clock.png'
              className='makeing_view_desc_icon'
            />
            10秒
          </View>
          <View className='makeing_view_section'>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img1.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img2.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img3.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img4.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img5.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img6.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
          </View>
          {/* <View className='makeing_view_section'>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img4.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item active`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img5.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
            <View className={`makeing_view_section_item`}>
              <Image
                src='https://jala-test-images.sndaurl.cn/images/makeing/img6.jpg'
                className='makeing_view_section_item_img'
                mode='aspectFill'
              />
            </View>
          </View> */}
          <View className='makeing_view_subtitle'>正在制图中…</View>
          <View className='makeing_view_progress'>
            <View
              className='makeing_view_progress_bar'
              style={{width: percent}}
            ></View>
          </View>
          <View className='makeing_view_tip'>当前人数较多，请耐心等待</View>
          <View className='makeing_view_tip'>可以离开当前页面，生成后在我的作品查看</View>
          <View className='makeing_view_tips'>
            <Image
              src='https://jala-test-images.sndaurl.cn/images/tip.png'
              className='makeing_view_tips_icon'
            />
            可开启进度通知，关闭此页面等待，制图完成会第一时间通知您
          </View>
          <View
            className='makeing_view_action'
            onClick={()=>{onOpenNotice()}}
          >
            开启进度通知
          </View>
        </View>
      </View>
      {
        showMask ? (
          <View className='mask'>
            <View className='modal_section'>
              <View className='modal_section_btn' onClick={()=>{doReceive()}}>确认领取</View>
              <View className='modal_section_tip'>*详情请前往会员中心查看</View>
            </View>
          </View>
        ) : null
      }
    </View>
  )
}
export default Makeing;
